<template>
    <div style="width: 95%;margin: auto;">
        <el-form :inline="true" :model="orderForm" class="demo-form-inline">
            <el-form-item style="width: 180px;">
                <el-input v-model="orderForm.username" placeholder="请输入用户名" clearable />
            </el-form-item>
            <el-form-item style="width: 180px;">
                <el-select v-model="orderForm.status" placeholder="请选择订单状态" clearable style="width: 200px;">
                    <el-option label="预约审核" value="1" />
                    <el-option label="用车中" value="2" />
                    <el-option label="退款成功" value="3" />
                    <el-option label="已完成" value="4" />
                    <el-option label="退款中" value="5" />
                    <el-option label="报险中" value="6" />
                    <el-option label="已取消" value="7" />
                </el-select>
            </el-form-item>
            <el-form-item style="width: 180px;">
                <el-button type="primary" @click="findAll(1)">查询</el-button>
                <el-button @click="resetForm()">重置</el-button>
            </el-form-item>
        </el-form>
    </div>

    <!-- 所有用户信息展示 -->
    <el-table :data="orderPage.orders" style="width: 95% ; margin:auto" @selection-change="handleSelectionChange">
        <!-- 添加复选框选项 -->
        <el-table-column type="selection" width="55" />
        <el-table-column fixed prop="orderid" label="编号" width="80" />
        <el-table-column prop="username" label="用户名" width="80" />
        <el-table-column prop="carname" label="汽车名" width="200" />
        <el-table-column prop="createtime" label="租车时间" width="200" format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss" />
        <el-table-column prop="endtime" label="还车时间" width="200" format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss" />
        <el-table-column prop="totalprice" label="总金额" width="100" />
        <el-table-column prop="statusDesc" label="订单状态" width="100" />
        <el-table-column prop="isdelete" label="是否删除" width="100">
            <template #default="scope">
                <el-tag v-if="scope.row.isdelete == 0" type="primary">未删</el-tag>
                <el-tag v-else type="danger">已删</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="操作" min-width="160" fixed="right">
            <template #default="scope">
                <el-button v-if="scope.row.statusDesc.includes('预约审核')" type="success" size="small"
                    @click="handleApproval(scope.row)">审核</el-button>
                <div>
                    <el-button v-if="['退款成功', '已完成', '已取消'].includes(scope.row.statusDesc) && scope.row.isdelete == 0"
                        type="danger" size="small" @click="handleDelete(scope.row.orderid)">删除</el-button>
                    <el-button v-if="['退款成功', '已完成', '已取消'].includes(scope.row.statusDesc) && scope.row.isdelete != 0"
                        type="danger" size="small" @click="handleDelete(scope.row.orderid)" disabled>删除</el-button>
                </div>
                <el-button v-if="['报险中', '退款中'].includes(scope.row.statusDesc)" type="warning" size="small"
                    @click="handleAfter(scope.row)">售后处理</el-button>

            </template>
        </el-table-column>
    </el-table>

    <!-- 分页标签 -->
    <div style="width: 95%;margin: 10px auto;">
        <el-pagination background layout="prev, pager, next" v-model:page-size="orderForm.pageSize"
            v-model:current-page="orderForm.pageNum" :total="orderForm.total" @current-change="findAll" />
    </div>
</template>
<script lang="ts" setup>

import { ref, reactive, onMounted } from 'vue'
import { Delete } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import request from '@/utils/request'
import { useUserStore } from '@/stores/userStore'
//创建stote实例
let store = useUserStore();
const username = store.userinfo.username;
const orderPage = reactive({
    orders: [],//存放后端查询用户数据变量
})
//存当前行的orderid
const orderrow = reactive({
    orderid: 0,
    carname: "",
    username: "",
    status: 0,
})
//售后按钮
const handleAfter = async (row) => {
    console.log(row);

    orderrow.orderid = row.orderid;
    orderrow.status = row.status;
    orderrow.carname = row.carname;
    orderrow.username = row.username;
    let res = await request.put("/order/handleAfter", orderrow);
    if (res.data.success) {
        ElMessage.success("售后处理成功");
        findAll(1);
    }
}
//声明一个对象用于条件查询
let orderForm = ref({
    pageNum: 1,
    pageSize: 8,
    total: 0,
})
//根据条件查询信息
const findAll = async (currentpage) => {
    orderForm.value.pageNum = currentpage;
    console.log(orderForm.value);

    let res = await request.post("/order/listAll", orderForm.value);
    if (res.data.success) {
        orderPage.orders = res.data.data.list;
        orderForm.value.pageNum = res.data.data.pageNum;
        orderForm.value.pageSize = res.data.data.pageSize;
        orderForm.value.total = res.data.data.total;
    }
    console.log(orderPage.orders);

}
onMounted(() => {
    findAll(1);
});
//定义对话框属性
const dialog = ref({
    visible: false,
    title: '',
    btnText: '',
    orders: {},
})

// 重置查询条件
const resetForm = () => {
    orderForm.value.username = "";
    orderForm.value.status = null;
}
//存当前行的orderid
const order = reactive({
    orderid: 0,
    carname: "",
    username: "",
})
//审核通过，
const handleApproval = async (row) => {
    console.log(row);

    order.orderid = row.orderid;
    order.carname = row.carname;
    order.username = row.username;
    let res = await request.put("/order/agree", order);
    if (res.data.success) {
        ElMessage.success("审核通过");
        findAll(1);
    } else ElMessage.error("审核未通过，您的报险次数过多，请一个月后再租车");

}
//删除行操作
const handleDelete = async (row) => {
    order.orderid = row;
    let res = await request.put("/order/del", order);
    if (res.data.success) {
        ElMessage.success("删除成功");
        findAll(1);
    }
}

</script>